
/**
 * carousel
 */


(function($,window,undefined){
	
	$.widget("mobile.carousel",$.mobile.widget,{
		options: {
		overlayTheme: "a",
		corners: true,
		initSelector: ":jqmData(role='carousel')"
	},
	_create:function() {
			var self = this;
			$el =self.element;
		    var id=$el.attr("id");
		    $el.addClass("ui-mobile-carousel");
		    $el.wrapInner("<div class='ui-carousel'></div>");
		    self.container = $(">.ui-carousel", $el);
		    self.panes = $(">ul>li", self.container);
		    self.indicator=self.element.attr("data-carousel-indicator");
		    if(self.indicator){
		    	var indicator=$('<ui id="'+self.indicator+'" class="indicator"></ul>');
		    	for(var i=0;i<self.panes.length;i++){
		    		if(i==0){
		    			indicator.append('<li class="on">"'+i+'"</li>');
		    			continue;
		    		}
		    		indicator.append('<li>"'+i+'"</li>');
		    	}
		    	$el.append(indicator);
		    }
		    self.pane_width = 0;
		    self.pane_count = self.panes.length;
			self.scroller= new iScroll($el[0], {
				snap: true,
				momentum: false,
				hScrollbar: false,
				onScrollEnd: function () {
					if($("#"+self.indicator)||$("#"+self.indicator).length>0){
						$(">li.on",$("#"+self.indicator)).attr("class","");
						$('> li:nth-child(' + (self.scroller.currPageX+1) + ')',$("#"+self.indicator)).attr("class","on");
					}
				}
			 });
		    self._initCarousel();
	        //bindEvent
		    self._bindPageEvents();
	},
	_initCarousel:function(){
    	var self = this;
    	var element =self.element;
		self._setPaneDimensions();
        $(window).on("load resize orientationchange", function() {
        	self._setPaneDimensions();
        });
        $el.css("visibility","visible");
	},
	_setPaneDimensions:function () {
		var self = this;
		var element =self.element;
    	if(element.is(":visible")){
    		self.pane_width = element.width();
            self.panes.each(function() {
                $(this).width(self.pane_width);
            });
            if($("#"+self.indicator)||$("#"+self.indicator).length>0){
				var indicatorPosition=$("#"+self.indicator).parent().width()/2;
				var indicatorWidth=$("#"+self.indicator).width()/2;
				$("#"+self.indicator).css("margin-left",indicatorPosition-indicatorWidth+"px");
            }
            self.container.width(self.pane_width*self.pane_count);
    	};
    },
    _autoCarousel:function(){
    	var self = this;
    	self.direction="next";
    	self.autoCar=setInterval(function(){
	        if(self.direction=="next"&&self.scroller.currPageX<=self.pane_count-1){
	        	 self.scroller.scrollToPage('next');
	        	 self.panes.removeClass("on").eq(self.scroller.currPageX).addClass("on");
	        	 if(self.scroller.currPageX==self.pane_count-1){
	        		 self.direction="prev";
	        	 }
		        return false;
	        }
	        else if(self.direction=="prev"&&self.scroller.currPageX<=self.pane_count-1){
		        self.scroller.scrollToPage('prev');
		        self.panes.removeClass("on").eq(self.scroller.currPageX).addClass("on");
	        	 if(self.scroller.currPageX==0){
	        		 self.direction="next";
	        	 }
		        return false;
	        }
    	},3000);
	
    },
    
	_bindPageEvents: function() {
		this._thisPage = this.element.closest( ".ui-page" );
		//page event bindings
		// Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
		// This method is meant to disable zoom while a fixed-positioned toolbar page is visible
		this._on( this._thisPage, {
			"pageshow": "_handlePageShow",
			"pagehide":"_handlePageHide"
				
		});
	},
	_handlePageShow: function() {
		var self=this;
		self.refresh();
			
	},
	_handlePageHide:function(){
		var self=this;
		clearInterval(self.autoCar);
	},
    showPane:function(direction,index){
		var self=this;
		if(direction=="prev"){
			self.scroller.scrollToPage('prev', 0);
			return false;
		}
		if(direction=="next"){
			self.scroller.scrollToPage('next', 0);
			return false;
		}
		
	},
	refresh:function(){
		var self = this;
		var element =self.element;
		if(element.attr("data-carousel-auto")=="true"){
          	self._autoCarousel();
        };
    	self._setPaneDimensions();
    	self.scroller.refresh();
//    	console.log("carousel refresh");
    },
    _clear:function(){
    	var self = this;
    	self.scroller.destroy();
    	
    },
   
    reload:function(){
    	var self = this;
    	self._clear();
    	self.container = $(">.ui-carousel", $el);
		    self.panes = $(">ul>li", self.container);
		    self.indicator=self.element.attr("data-carousel-indicator");
		    if(self.indicator){
		    	var indicator=$('#'+self.indicator);
		    	indicator.html("");
		    	for(var i=0;i<self.panes.length;i++){
		    		if(i==0){
		    			indicator.append('<li class="on">"'+i+'"</li>');
		    			continue;
		    		}
		    		indicator.append('<li>"'+i+'"</li>');
		    	}
		    	$el.append(indicator);
		    }
		    self.pane_width = 0;
		    self.pane_count = self.panes.length;
			self.scroller= new iScroll($el[0], {
				snap: true,
				momentum: false,
				hScrollbar: false,
				onScrollEnd: function () {
					if($("#"+self.indicator)||$("#"+self.indicator).length>0){
						$(">li.on",$("#"+self.indicator)).attr("class","");
						$('> li:nth-child(' + (self.scroller.currPageX+1) + ')',$("#"+self.indicator)).attr("class","on");
					}
				}
			 });
		    self._initCarousel();
	        //bindEvent
		    self._bindPageEvents();
    }
		
	});
	
	$.mobile.document.bind( "pagecreate create", function( e ) {
		$.mobile.carousel.prototype.enhanceWithin( e.target );
	});

})( jQuery, this );

